<template>
	<view class="container">
		<view class="input-view hor-layout-center">
			<input v-model="newValue" style="font-size: small;width: calc(100% - 50px);" focus="true" :maxlength="getInputLength">
			<i :style="{visibility:canSaveUse}" @click="updateUserInfos" class="confirm-icon fa fa-lg fa-check-circle"></i>
		</view>
	</view>
</template>

<script>
	import userUtils from "@/common/user-utils.js"
	export default {
		data() {
			return {
				userObj: {
					value: ''
				},
				preValue: '',
				newValue: '',
			}
		},
		computed: {
			canSaveUse() {
				if (this.preValue === this.newValue)
					return "hidden"
				switch (this.userObj.tag) {
					case "email":
						if (!/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(this.newValue))
							return "hidden";
						break
					case "mobile":
						if (!/^1[3|4|5|7|8][0-9]{9}$/.test(this.newValue))
							return "hidden";
						break
				}
				return "visible"
			},
			getInputLength() {
				switch (this.userObj.tag) {
					case "nickName":
						return 10;
						break
					case "email":
						return 20;
						break
					case "mobile":
						return 11;
						break
				}
			}
		},
		onLoad(options) {
			console.log(options)
			var userObj = JSON.parse(options.userObj)
			this.userObj = userObj
			this.newValue = userObj.value
			this.preValue = userObj.value
			uni.setNavigationBarTitle({
				title: `更新${userObj.key}`
			})
		},
		methods: {
			updateUserInfos() {
				let tag = this.userObj.tag
				console.log(tag)
				let params = {}
				params[tag] = this.newValue
				this.updateUser(params)
			},
			updateUser(params) {
				userUtils.updateUserInfo(params, () => {
					userUtils.getUserInfo()
					setTimeout(() => {
						uni.navigateBack({});
					}, 500);
				})
			},
		}
	}
</script>

<style>
	page {
		background: #eeeeee;
	}

	.input-view {
		margin: 15px;
		padding: 6px;
		background: white;
		border: 1px solid #8e929c;
		border-radius: 5px;
		position: relative;
	}

	.confirm-icon {
		position: absolute;
		right: 10px;
	}
</style>
